<template>
  <div class="select-tree-container">
    <div class="title" @click="handleShowTreeClick">
      <span class="text">图层控制</span>
      <span v-if="showTree">
          <svg-icon icon="arrow-up" class="arrow-up"></svg-icon>
        </span>
      <span v-else>
          <svg-icon icon="arrow-down" class="arrow-down"></svg-icon>
        </span>
    </div>
    <div v-show="showTree" class="tree-box">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="expandNode"
        check-on-click-node
        :props="defaultProps"
        :default-checked-keys="defaultCheckedTree"
        @check-change="handleNodeClick"
      >
        <template v-slot="{ node, data }">
          <svg-icon :icon="data.icon"></svg-icon>
          <span style="padding-left: 4px; font-size: 15px">
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineEmits, defineProps, defineExpose, onMounted } from 'vue'

  const emits = defineEmits(['showLayer', 'hideLayer'])
  const expandNode = ref(false)
  const showTree = ref(true)

  const defaultProps = ref({
    // 配置项
    children: 'children',
    label: 'label'
  })

  const props = defineProps({
    treeData: {
      type: Array,
      default: () => []
    },
    defaultCheckedTree: {
      type: Array,
      default: () => []
    }
  })

  const handleShowTreeClick = () => {
    showTree.value = !showTree.value
  }

  const handleNodeClick = (values, checked) => {
    if (!values.children) {
      if (checked) {
        //显示图层
        emits('showLayer', values.icon)
      } else {
        //隐藏图层
        emits('hideLayer', values.icon)
      }
    }
  }

</script>

<style lang="scss" scoped>
  .select-tree-container {
    width: 240px;
    display: flex;
    flex-direction: column;
    background: #112C34;
    opacity: 0.8;
    border: 1px solid #00FFFF;
    /*row-gap: 17px;*/
    /*border: 1px solid #1079db;*/
    /*background: rgba(22, 29, 35, 0.75);*/

    .title {
      /*width: 100%;*/
      /*height: 35px;*/
      display: flex;
      align-items: center;
      background: linear-gradient(0deg, rgba(0,255,255,0) 0%, rgba(0,255,255,0.58) 100%);
      padding-left: 24px;
      cursor: pointer;

      .text {
        width: 80%;
        height: 100%;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00FFFF;
        /* -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;*/
      }

      .arrow-up {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
      }

      .arrow-down {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
      }
    }

    .tree-box {
      /*margin-bottom: 20px;*/
    }

    :deep(.el-tree) {
      position: relative;
      cursor: default;
      background: #112C34;
      opacity: 0.8;
      color: #ffffff;
      /*padding-top: 18px;*/
      padding-bottom: 18px;
      --el-checkbox-background-color: #112C34 !important;
      --el-tree-node-hover-background-color: #1abcdf;
      --el-tree-font-color: rgb(255, 255, 255);
      --el-tree-node__expand-icon: none !important;
      /*--el-tree-expand-icon-color: #1598f3;
      --el-tree-node__expand-icon: 20px;*/
    }
    //图层控制树形结构
    .el-checkbox__inner{
      background-color: #112C34 !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background: #112C34 !important;
    }
    .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #112C34 !important;
    }
    .el-tree-node__expand-icon{
      display: none !important;
    }
  }

  .svg-icon {
    width: 22px;
    height: auto;
  }
</style>
